<template>
  <div class="order-panel">
    <el-row class="order-panel-title">
      <el-col :span="2">ID</el-col>
      <el-col :span="5">商品信息</el-col>
      <el-col :span="4">买家信息</el-col>
      <el-col :span="4">送货方式</el-col>
      <el-col :span="4">支付金额</el-col>
      <el-col :span="1">状态</el-col>
      <el-col :span="4">操作</el-col>
    </el-row>

    <div class="order-panel-content" v-for="(item,index) in orders" :key="index">
      <div class="order-panel-content-title">
        <div>
          <span>订单号:</span>
          <span style="color:#259B24">{{ item.order_sn }}</span>
        </div>
        <div>
          <span style="font-weight:500">{{ item.format_create_time }}</span>
        </div>
        <div>
          <span v-if="item.order_type === '3'">余额支付</span>
          <span v-else>微信支付</span>
        </div>
        <div v-if="item.express_type === '1' || item.express_type === '2'">
          <el-button type="warning" style="padding:3px 5px;" size="mini"
            v-if="item.status === '1'" @click="takeTheirParams.order_sn = item.order_sn; disTakeTheir = true">更换</el-button>
          <span>团长</span>
        </div>
        <div v-if="item.express_type === '1' || item.express_type === '2'">
          <span>姓名：</span>
          <span>{{ item.realname }}</span>
          <span style="font-weight:600">{{ item.leader_phone }}</span>
        </div>
        <div v-if="item.express_type === '1' || item.express_type === '2'">
          <span>小区：</span>
          <span>{{ item.area_name }}</span>
        </div>
        <div v-if="item.express_type === '1' || item.express_type === '2'">
          <span>地址：</span>
          <span>{{ item.province }}-{{ item.city }}{{ item.area }}</span>
        </div>
        <div v-if="item.estimated_service_time && item.estimated_service_time.indexOf('选择预计配送时间') == -1" style="float: right">
          <span>预约送货时间：</span>
          <span>{{ JSON.parse(item.estimated_service_time).join('  ') }}</span>
        </div>
      </div>
      <el-row class="order-panel-content-row">
        <el-col :span="2" class="order-panel-content-col">
          <div>{{ item.id }}</div>
        </el-col>
        <el-col :span="5" class="order-panel-content-col">
          <el-scrollbar :noresize="false">
              <div class="goods-container" v-for="order in item.order" :key="order.goods_id"
                :style="item.order.lenght>1 ? {'height':'70px','line-height':'70px'} : {'height':'120px','line-height':'120px'}">
                <div style="width:40px">
                  <l-pic :picurl="order.pic_url" :size="{height:40,width:40}" :disdel="false" :disview="false" style="vertical-align: middle;"/>
                </div>
                <div class="goods-container-info">
                  <div>{{order.name}}</div>
                  <div>
                    <span>￥{{ order.price }}x{{ order.number }}</span>
                    <span>小计:</span>
                    <span style="color:red">￥{{ order.total_price }}</span>
                  </div>
                  <div>
                    <span>规格</span>
                    <span>{{ order.property1_name }}</span>
                    <span>{{ order.property2_name }}</span>
                  </div>
                </div>
              </div>
          </el-scrollbar>
        </el-col>
        <el-col :span="4" class="order-panel-content-col">
          <el-scrollbar :wrapStyle="{height:'120px'}" :viewStyle="{height:'115px'}" :noresize="false">
            <div class="buyer-info" style="line-height:150px">
              <div>
                <span>昵称：</span>
                <span>{{ item.nickname }}</span>
                <span>[{{ item.user_id }}]</span>
              </div>
              <div>
                <span>姓名：</span>
                <span>{{ item.name }}</span>
              </div>
              <div>
                <span>电话：</span>
                <span>{{ item.phone }}</span>
              </div>
              <div>
                <span>地址：</span>
                <span>{{ item.address.split('-').join('') }}</span>
              </div>
            </div>
          </el-scrollbar>
        </el-col>
        <el-col :span="4" class="order-panel-content-col">
          <div style="width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">
            <svg-icon icon-class="快递查询" style="font-size:25px"/>
            <span>{{ item.express_type === '0' ? '快递' : item.express_type === '1' ? '自提' : '团长送货' }}</span>
          </div>
        </el-col>
        <el-col :span="4" class="order-panel-content-col">
          <el-scrollbar :wrapStyle="{height:'120px'}" :viewStyle="{height:'115px'}" :noresize="false">
            <div class="price-info">
              <div>
                <span>商品总价：</span>
                <span>{{ item.total_price }}</span>
              </div>
              <div>
                <span>配送费用：</span>
                <span>{{ item.express_price }}</span>
              </div>
              <div>
                <span>订单总价：</span>
                <span>{{ item.total_price }}</span>
              </div>
              <div>
                <span>总优惠：</span>
                <span>0</span>
              </div>
              <div>
                <span>实付金额：</span>
                <span style="color:red">￥{{ item.payment_money }}</span>
              </div>
            </div>
          </el-scrollbar>
        </el-col>
        <el-col :span="1" class="order-panel-content-col">
          <el-button :type="orderStatus(item.status).type" style="padding:4px 7px;" size="mini">{{ orderStatus(item.status).label }}</el-button>
        </el-col>
        <el-col :span="4" class="order-panel-content-col">
          <el-scrollbar :wrapStyle="{height:'120px'}" :viewStyle="{height:'115px'}" :noresize="false">
            <div style="line-height: 30px;padding:10px 10px">
              <el-button type="primary" plain class="handle-button"
                v-if="item.status === '1'" @click="showSend(item)">发货</el-button>
              <el-button type="primary" plain class="handle-button"
                v-if="item.status === '5'" @click="showAfterSale(item)">退款详情</el-button>
              <el-button type="primary" plain class="handle-button"
                         v-if="item.status === '1' && sendList.uu_is_open === '1'" @click="getUUPrice(item.order_sn)">UU跑腿发货</el-button>
              <el-button type="primary" plain class="handle-button"
                         v-if="item.status === '1' && sendList.dianwoda_is_open === '1'" @click="sendOutDianwoda(item.order_sn)">点我达发货</el-button>
              <el-button type="primary" plain class="handle-button"
                v-if="item.status === '1'" @click="takeTheirParams.order_sn = item.order_sn; disTakeTheir = true">修改自提点</el-button>
              <el-button type="warning" plain class="handle-button" v-if="item.admin_remark === ''"
                @click="openRemarkPanle(item.admin_remark,item.order_sn)">备注</el-button>
              <el-badge value="注" v-else style="margin-top:10px;margin-right:40px">
                <el-button type="success" class="handle-button" @click="openRemarkPanle(item.admin_remark,item.order_sn)">已备注</el-button>
              </el-badge>
              <el-button type="danger" plain class="handle-button" @click="refundAffirm(item)">一键退款</el-button>
              <el-button type="success" plain class="handle-button" @click="print(item.order_sn)">打印小票</el-button>
            </div>
          </el-scrollbar>
        </el-col>
      </el-row>
    </div>

    <!-- 发货面板 -->
    <el-dialog title="快递发货" :visible.sync="disSend" width="500px">
      <el-form>
        <el-form-item label="发货方式" class="goods-form-item">
          <el-radio-group v-model="sendParams.send_type" @change="send_type_change" size="small">
            <el-radio label="1">本地</el-radio>
            <el-radio label="0">快递</el-radio>
          </el-radio-group>
        </el-form-item>
        <div v-if="sendParams.send_type === '0'" electronics>
          <el-form-item label="快递名称" class="goods-form-item">
            <el-select v-model="sendParams.express_id" placeholder="选择快递" @change="get_express_name" class="goods-form-item-input" size="small">
              <el-option :label="item.express_name" :value="index" v-for="(item,index) in electronics" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="快递单号" class="goods-form-item">
            <el-input v-model="sendParams.express_number" placeholder="请输入" size="small"></el-input>
          </el-form-item>
        </div>
        <div style="margin-top:15px;text-align:center">
          <el-button type="primary" style="padding: 10px 25px" @click="sendOut">发货</el-button>
        </div>
      </el-form>
    </el-dialog>

    <!-- 退款详情面板 -->
    <el-dialog title="退款" :visible.sync="disAfterSale" width="500px">
      <el-form>
        <el-form-item label="退款类型" class="goods-form-item" prop="name">
          {{ afterSale.after_type_str }}
        </el-form-item>
        <el-form-item label="退款理由" class="goods-form-item" prop="name">
          {{ afterSale.after_remark }}
        </el-form-item>
        <el-form-item label="退款图片" class="goods-form-item" prop="name">
          <div v-for="img in afterSale.after_imgs" :key="img">
            <l-pic :picurl="img.pic_url" :size="{height:40,width:40}" :disdel="false" :disview="false" style="vertical-align: middle;"/>
          </div>
        </el-form-item>
        <el-form-item label="退货单号" class="goods-form-item" prop="name">
          {{ afterSale.after_express_number }}
        </el-form-item>
        <div v-if="disReceivingGoods" style="margin-top:15px;text-align:center">
          <el-button type="primary" style="padding: 10px 25px" @click="receiving_goods">确认收货</el-button>
        </div>
        <div v-if="disOperation" style="margin-top:15px;text-align:center">
          <el-button type="primary" style="padding: 10px 25px" @click="agree_refund">同意退款</el-button>
          <el-button type="primary" style="padding: 10px 25px" @click="refuse_refund">拒绝退款</el-button>
        </div>
      </el-form>
    </el-dialog>

    <!-- 拒绝退款理由及图片 -->
    <el-dialog title="拒绝说明" :visible.sync="disRefuse" width="500px">
      <el-form>
        <el-form-item label="备注" class="goods-form-item" prop="name">
          <el-input type="textarea" v-model="refuseAfterSale.after_admin_remark" :autosize="{ minRows: 5, maxRows: 20 }" placeholder="请输入备注"></el-input>
        </el-form-item>
        <el-form-item label="图片" class="goods-form-item" prop="pic_urls">
          <el-button type="primary" plain @click="openMainPicPanel" size="small">选择图片</el-button>
        </el-form-item>
        <el-form-item class="goods-form-item" v-if="mainPicList.length>0">
          <l-pic v-for="(item,index) in mainPicList" :key="index"
                 :picurl="item"
                 :pickey="index"
                 :picdata="item"
                 :picmargin="'-20px 10px 10px 10px'"
                 :size="{ width:80, height:80 }"
                 :piclist="mainPicList"
                 @delPic="delMainPic"/>
        </el-form-item>
        <div style="margin-top:15px;text-align:center">
          <el-button type="primary" style="padding: 10px 25px" @click="refuse">提交</el-button>
        </div>
      </el-form>
    </el-dialog>

    <!-- 拒绝退款理由及图片只显示 -->
    <el-dialog title="拒绝说明" :visible.sync="disRefuseAfter" width="500px">
      <el-form>
        <el-form-item label="备注" class="goods-form-item" prop="name">
          备注
        </el-form-item>
        <el-form-item class="goods-form-item" v-if="mainPicList.length>0">
          <l-pic v-for="(item,index) in mainPicList" :key="index"
                 :picurl="item"
                 :pickey="index"
                 :picdata="item"
                 :picmargin="'-20px 10px 10px 10px'"
                 :size="{ width:80, height:80 }"/>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- UU跑腿 -->
    <el-dialog title="UU跑腿" :visible.sync="disUU" width="500px">
      <el-form>
        <el-form-item label="UU跑腿账户余额" class="goods-form-item" prop="name">
          {{ uuArr.AccountMoney }}
        </el-form-item>
        <el-form-item label="UU跑腿订单金额" class="goods-form-item" prop="short_name">
          {{ uuArr.total_money }}
        </el-form-item>
        <el-form-item label="实际需要支付金额" class="goods-form-item" prop="short_name">
          {{ uuArr.need_paymoney }}
        </el-form-item>
        <el-form-item label="是否需要保温箱" class="goods-form-item">
          <el-radio v-model="uuArr.special_type" label="1">需要</el-radio>
          <el-radio v-model="uuArr.special_type" label="0">不需要</el-radio>
        </el-form-item>
        <el-form-item label="取件是否给我打电话" class="goods-form-item">
          <el-radio v-model="uuArr.callme_withtake" label="1">需要</el-radio>
          <el-radio v-model="uuArr.callme_withtake" label="0">不需要</el-radio>
        </el-form-item>
        <div style="margin-top:15px;text-align:center">
          <el-button type="primary" style="padding: 10px 25px" @click="sendOutUU">发货</el-button>
        </div>
      </el-form>
    </el-dialog>

    <!-- 备注面板 -->
    <el-dialog title="备注" :visible.sync="disRemark" width="500px">
      <div>
        <el-input type="textarea" v-model="remarkParams.remark" :autosize="{ minRows: 5, maxRows: 20 }" placeholder="请输入备注"></el-input>
        <div style="margin-top:15px;text-align:center">
          <el-button type="primary" style="padding: 10px 25px" @click="sendRemark">提交</el-button>
        </div>
      </div>
    </el-dialog>

    <!-- 自提点面板 -->
    <el-dialog :visible.sync="disTakeTheir" width="40%" title="选择自提点">
      <take-their @selectRowData="sendTakeTheir"/>
    </el-dialog>

    <!-- 拒绝退款理由及图片 -->
    <el-dialog title="拒绝说明" :visible.sync="disPicPanel" width="1128px">
      <photo-album v-if="disPicPanel" :maxcount="maxPicCount" @selectPicData="getPicData"/>
    </el-dialog>

  </div>
</template>

<script>
import LPic from '@/components/lPic';
import TakeTheir from './TakeTheir'
import { putOrderStatus, putOrderAfterStatus, putOrderRemark, putOrderRefund, putOrderLeader, putOrderStatusDianwoda, getStatusUU, putOrderStatusUU, print, getSuborder } from '@/api/order'
import { getTakeGoods, getExpDocList } from '@/api/setting'
import PhotoAlbum from '@/components/PhotoAlbum'

export default {
  name: 'OrderPanel',
  components: {
    PhotoAlbum,
    LPic,
    TakeTheir
  },
  props: {
    name: {
      type: String,
      required: false,
      default: ''
    },
    orderDataList: {
      type: Array,
      required: true
    },
    sendList: {
      type: Object,
      required: false
    },
  },
  data() {
    return {
      status: [
        { label: '未选定', key: '-1', type:'info' },
        { label: '待付款', key: '0', type:'warning' },
        { label: '待发货', key: '1', type:'info' },
        { label: '已取消', key: '2', type:'primary' },
        { label: '已发货', key: '3', type:'info' },
        { label: '已退款', key: '4', type:'primary' },
        { label: '退款中', key: '5', type:'warning' },
        { label: '待评价', key: '6', type:'primary' },
        { label: '已完成', key: '7', type:'success' },
        { label: '已删除', key: '8', type:'danger' },
        { label: '一键退款', key: '9', type:'warning' },
        { label: '拼团中', key: '11', type:'danger' },
      ],
      disSend: false,//打开发货面板
      electronics: [],//快递列表
      disAfterSale: false,//打开退款详情面板
      disOperation: false,//打开退款详情面板，是否显示同意和拒绝操作
      disReceivingGoods: false,//打开退款详情面板，是否显示确认收货操作
      disRefuse: false,//拒绝退款填写理由面板
      disRefuseAfter: false,//拒绝退款显示理由面板
      order_sn: '',//退款详情使用到的订单编号，其他的其实都可以使用这一个
      disUU: false,//打开UU跑腿面板
      sendParams: { //提交的发货参数
        send_type: '1',
        express_name: '',
        order_sn: '',
        key: this.$store.state.app.activeApp.saa_key
      },
      uuArr: {
        special_type: '0',
        callme_withtake: '0',
      },
      disRemark: false,//打开备注面板
      remarkParams: { //提交的备注参数
        remark: '',
        order_sn: '',
        express_number: '',
        express_id: '',
        key: this.$store.state.app.activeApp.saa_key
      },
      disTakeTheir: false,//打开自提点面板
      takeTheirParams: { //修改自提点的参数
        leader_uid: '',
        order_sn: '',
        key: this.$store.state.app.activeApp.saa_key
      },
      orders: {},
      afterSale: {
        is_send_after_sale: 0,//是否已发货申请退款或退货 拒绝退款的时候用到
        refund_status: 1,//是否显示发货按钮 1 显示 0 不显示
      },
      refuseAfterSale: {
        status: 2,
        after_admin_remark: '',
        after_admin_imgs: '',
        key: this.$store.state.app.activeApp.saa_key,
      },
      mainPicList: [],//拒绝退款图片列表
      disPicPanel: false, //打开相册面板
      maxPicCount: 5,//最多选择图片张数
    }
  },
  mounted() {

  },
  watch: {
    orderDataList(val) {
      this.orders = val
    }
  },
  methods: {
    /**
     * 显示发货面板
     */
    showSend(item) {
      //如果 express_type=1 则直接发货，否则快递，现在去除判断，直接打开发货弹窗，自主选择发货
      //显示快递发货面板
      this.disSend = true;
      this.sendParams.order_sn = item.order_sn;
    },
    /**
     * 显示退款详情面板
     */
    showAfterSale(item) {
      console.log(item)
      this.afterSale.id = item.id;
      this.sendParams.order_sn = item.order_sn;
      const params = {
        order_group_sn: item.order_sn,
        key: this.$store.state.app.activeApp.saa_key
      };
      //获取订单详情
      getSuborder(params).then(response => {
        if(response.status === 200){
          if (response['data'].length <= 0) {
            this.$message.warning('订单错误，子订单不存在');
            return;
          }
          if (response['data'][0].express_id != null) {
            this.afterSale.is_send_after_sale = 1;
          }
          //判断商户是否已确认收货
          if (response.refund != null && response.refund != '') {
            this.afterSale.refund_status = 0;
          }
          const after_sale_type = item['after_type'];
          if (after_sale_type === '1') {
            this.afterSale.after_type_str = '退款退货';
          } else if (after_sale_type === '2') {
            this.afterSale.after_type_str = '仅退款';
          } else {
            this.afterSale.after_type_str = '类型错误';
          }
          this.afterSale.after_remark = item['after_remark'];
          this.afterSale.after_imgs = item['after_imgs'] ? item['after_imgs'].split(',') : [];
          this.afterSale.after_express_number = item['after_express_number'] ? item['after_express_number'] : '无';
          this.afterSale.after_type = item['after_type'];
          if (item.after_sale === '0'){
            this.disOperation = true;
          } else if (item.after_sale === '1' && this.afterSale.is_send_after_sale && this.afterSale.refund_status) {
            //显示收货确认按钮
            this.disReceivingGoods = true;
          } else if (item.after_sale === '2') {
            //显示拒绝信息，备注和图片
          }
          this.disAfterSale = true;
        }else{
          this.$message.error(response.message);
        }
      })
    },
    /**
     * 确认收货按钮
     */
    receiving_goods() {
      this.$confirm('确定收货吗','收货',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const subData = {
          status: 3,
          key: this.$store.state.app.activeApp.saa_key,
          id: this.afterSale.id,
        }
        putOrderAfterStatus(subData).then(res => {
          if(res.status === 200){
            this.$message.success('确认收货成功');
            this.disAfterSale = false;
            this.$emit('sendOut');
          }
        })
      }).catch(() => {
        this.$message.error('取消')
      })
    },
    /**
     * 同意退款
     */
    agree_refund() {
      //获取该商户对应的收货地址和电话
      const params = {
        key: this.$store.state.app.activeApp.saa_key
      };
      if (this.afterSale.after_type == 1) {//退款退货
        getTakeGoods(params).then(response => {
          if(response.status === 200){
            if (response['data'].length <= 0) {
              this.$message.warning('未查询到收货信息，请新创建');
              return;
            }
            //同意退款，修改状态
            const subData = {
              status: 1,
              after_phone: response['data'][0]['after_phone'],
              after_addr: response['data'][0]['after_addr'],
              key: this.$store.state.app.activeApp.saa_key,
              id: this.afterSale.id,
            }
            putOrderAfterStatus(subData).then(res => {
              if(res.status === 200){
                this.$message.success('同意退款成功');
                this.disAfterSale = false;
                this.$emit('sendOut');
              }
            })
          }else{
            this.$message.error(response.message);
          }
        })
      } else {//仅退款
        //同意退款，修改状态
        const subData = {
          status: 1,
          key: this.$store.state.app.activeApp.saa_key,
        }
        putOrderAfterStatus(subData).then(res => {
          if(res.status === 200){
            this.$message.success('同意退款成功');
            this.disAfterSale = false;
          }
        });
      }
    },
    /**
     * 拒绝退款，填写拒绝理由或者发货
     */
    refuse_refund() {
      this.disAfterSale = false;
      if (this.afterSale.is_send_after_sale) {//已发货
        this.disRefuse = true;
      } else {//未发货
        this.disSend = true;
      }
    },
    /**
     * 拒绝退款确认操作
     */
    refuse() {
      this.refuseAfterSale.after_admin_imgs = this.mainPicList.join(',');
      this.refuseAfterSale.id = this.afterSale.id;
      putOrderAfterStatus(this.refuseAfterSale).then(res => {
        if(res.status === 200){
          this.$message.success('拒绝退款成功');
          this.disAfterSale = false;
          this.disRefuse = false;
        }
      });
    },
    /**
     * 打开主图选择面板
     */
    openMainPicPanel() {
      if(this.maxPicCount > 0){
        this.disPicPanel = true;
      }else{
        this.$message.warning(`最多可选择5张图片，已选择${5-this.maxPicCount}张,不可选择`);
      }
    },
    /**
     * 获取选择到的主图数据
     */
    getPicData(data) {
      this.disPicPanel = false;
      data.forEach(item => {
        if(this.maxPicCount > 0) {
          this.mainPicList.push(item.pic_url);
          this.maxPicCount --;
        }else{
          this.$message.warning(`最多可选择5张图片，已选择${5-this.maxPicCount}张`);
          return false
        }
      })
    },
    /**
     * 删除主图
     */
    delMainPic(data) {
      this.mainPicList.splice(this.mainPicList.findIndex(item => item===data),1);
      this.maxPicCount++;
    },
    /**
     * 获取快递列表
     */
    send_type_change(e) {
      if (e === '0') {
        //获取快递列表
        const params = {
          key: this.$store.state.app.activeApp.saa_key
        }
        getExpDocList(params).then(response => {
          if(response.status === 200){
            this.electronics = response.data;
          }else if(response.status === 204){
            this.electronics = [];
          }else{
            this.$message.error(response.message);
          }
        })
      }
    },
    /**
     * 选择快递切换事件
     */
    get_express_name(e) {
      this.sendParams.express_name = this.electronics[e].express_name;
    },
    /**
     * 发货
     */
    sendOut() {
      const params = {
        express_type: this.sendParams.send_type,
        order_sn: this.sendParams.order_sn,
        key: this.$store.state.app.activeApp.saa_key
      }
      if (this.sendParams.send_type === '0'){
        params.express_id = this.sendParams.express_id;
        params.express_name = this.sendParams.express_name;
        params.express_number = this.sendParams.express_number;
      }
      putOrderStatus(params).then(response => {
        if(response.status === 200){
          this.$message.success('发货成功');
          this.disSend = false;
          this.$emit('sendOut');
        }else{
          this.$message.error(response.message);
        }
      })
    },
    /**
     * UU跑腿获取计算价格
     */
    getUUPrice(orderSn) {
      const params = { order_sn: orderSn, key: this.$store.state.app.activeApp.saa_key }
      getStatusUU(params).then(response => {
        if(response.status === 200){
          this.uuArr.price_token = response.data.price_token;
          this.uuArr.order_price = response.data.total_money;
          this.uuArr.balance_paymoney = response.data.need_paymoney;
          this.uuArr.AccountMoney = response.data.AccountMoney;
          this.uuArr.total_money = response.data.total_money;
          this.uuArr.need_paymoney = response.data.need_paymoney;
          this.uuArr.order_sn = orderSn;
          this.disUU = true;
        }else{
          this.$message.error(response.message);
        }
      })
    },
    /**
     * UU跑腿发货
     */
    sendOutUU() {
      const params = {
        key: this.$store.state.app.activeApp.saa_key,
        balance_paymoney: this.uuArr.balance_paymoney,
        callme_withtake: this.uuArr.callme_withtake,
        order_price: this.uuArr.order_price,
        order_sn: this.uuArr.order_sn,
        price_token: this.uuArr.price_token,
        special_type: this.uuArr.special_type,
      };
      putOrderStatusUU(params).then(response => {
        if(response.status === 200){
          this.$message.success('发货成功');
          this.$emit('sendOut');
        }else{
          this.$message.error(response.message);
        }
      })
    },
    /**
     * 点我达发货
     */
    sendOutDianwoda(orderSn) {
      const params = { order_sn: orderSn, key: this.$store.state.app.activeApp.saa_key }
        putOrderStatusDianwoda(params).then(response => {
        if(response.status === 200){
          this.$message.success('发货成功');
          this.$emit('sendOut');
        }else{
          this.$message.error(response.message);
        }
      })
    },
    /**
     * 打开备注面板
     */
    openRemarkPanle(remark,orderSn) {
      this.disRemark = true;
      this.remarkParams.remark = remark;
      this.remarkParams.order_sn = orderSn;
    },
    /**
     * 添加修改备注
     */
    sendRemark() {
      if(this.remarkParams.remark.trim() === ''){
        this.$message.error('备注内容不可为空，请填写备注！');
        return;
      }
      const params = {
        key: this.remarkParams.key,
        remark: this.remarkParams.remark,
        order_sn: this.remarkParams.order_sn,
      }
      putOrderRemark(params).then(response => {
        if(response.status === 200){
          this.$message.success('保存备注成功！');
          this.disRemark = false;
          this.$emit('sendRemark')
        }else{
          this.$message.error(response.message)
        }
      })
    },
    /**
     * 退款确认
     */
    refundAffirm(data) {
      this.$confirm('一键退款可能引起买家投诉，请协商后谨慎操作','一键退款',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const parmas = { id: data.id, key: this.$store.state.app.activeApp.saa_key };
        putOrderRefund(parmas).then(response => {
          if(response.status === 200){
            this.$message.success('退款成功！');
            this.$emit('sendRefund');
          }else{
            // this.$message.error(response.message);
          }
        })

      }).catch(() => {
        this.$message.error('取消')
      })
    },
    /**
     * 打印小票
     */
    print(data) {
      this.$confirm('确定要打印小票吗','打印',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const parmas = { order_sn: data, key: this.$store.state.app.activeApp.saa_key };
        print(parmas).then(response => {
          if(response.status === 200){
            this.$message.success('打印成功！');
            this.$emit('sendRefund');
          }else{
            // this.$message.error(response.message);
          }
        })

      }).catch(() => {
        this.$message.error('取消')
      })
    },
    /**
     * 获取选中的自提点的信息
     */
    sendTakeTheir(data) {
      this.takeTheirParams.leader_uid = data.uid;
      putOrderLeader(this.takeTheirParams).then(response => {
        if(response.status === 200){
          this.disTakeTheir = false;
          this.$message.success('修改成功！');
          this.$emit('sendTakeTheir');
        }else{
          this.$message.error(response.message)
        }
      })
    },
    /**
     * 订单状态
     */
    orderStatus(status){
      const os = this.status.find(item => item.key === status)
      return os === undefined ? { label: '' } : os;
    }
  },
}
</script>

<style lang="scss" scoped>
.order-panel{
  border-bottom: 1px solid #B3E2FF;
  &-title{
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: #F2F2F2F2;
  }
  &-content{
    &-title{
      height: 40px;
      width: 100%;
      line-height: 40px;
      border: 1px solid #B3E2FF;
      box-sizing: border-box;
      padding: 0 15px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 13px;
      background-color: #F0F8FF;
      &>div{
        display: inline-block;
        padding: 0 5px;
      }
    }
    &-row{
      padding: 10px 0;
      text-align: center;
      height: 120px;
      line-height: 120px;
    }
    &-col{
      padding: 0 5px;
    }
  }
}
.goods-container{
  &>div{
    display: inline-block;
  }
  &-info{
    line-height: normal;
    vertical-align: middle;
    width: -webkit-calc(100% - 45px);
    width: -moz-calc(100% - 45px);
    width: calc(100% - 45px);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    &>div{
      padding:2px 0;
    }
  }
}
.buyer-info{
  padding: 5px 10px;
  &>div{
    line-height: normal;
    text-align: left;
  }
}
.price-info{
  padding: 5px 10px;
  &>div{
    line-height: normal;
    text-align: left;
  }
}
.handle-button{
  padding: 3px 5px;
}
</style>
